<template>
  <div style="display: flex; height: 42px; align-items: center">
    <div style="font-weight: bold; font-size: 16px; padding-right: 15px">执行条件配置</div>
    <el-switch active-text="启用" v-model="formData.state" inactive-text="禁用" :active-value="1" :inactive-value="0" inline-prompt></el-switch>
  </div>
  <el-form :model="formData" label-width="auto">
    <el-form-item label="执行条件说明">
      <el-input v-model="formData.memo"></el-input>
    </el-form-item>
    <el-form-item label="前置执行指令">
      <el-select v-model="formData.preCommandId"> <el-option v-for="item in commandList" :key="item.value" :label="item.label" :value="item.value" /></el-select>
    </el-form-item>
    <el-form-item label="执行条件">
      <el-select v-model="formData.triggerCondition">
        <el-option v-for="item in assertResultList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
  </el-form>
  <div style="width: 100%; display: flex; justify-content: end">
    <el-button @click="close">关闭</el-button>
    <el-button type="primary" @click="ok">确认</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

defineOptions({
  name: 'ShellConditionConfig',
});
const formData = ref({
  state: 1,
  preCommandId: '', //指令ID
  memo: '执行条件说明',
  triggerCondition: 1,
});

const assertResultList = [
  { label: '断言成功后执行', value: 1 },
  { label: '断言失败后执行', value: 0 },
];

const commandList = [
  { label: '判断Docker是否已安装', value: '11111111' },
  { label: '判断JDK是否已安装', value: '22222222' },
];

const emits = defineEmits(['close']);

const close = () => {
  emits('close');
};

const ok = () => {
  emits('close');
};
</script>
<style lang="scss" scoped></style>
